/*
 * @Author: yuanxiang 
 * @Date: 2018-05-09 17:27:27 
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-21 15:43:29
 */
<template>
    <div>
      <el-row type="flex">
        <div class="topLeftCon">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
	          <div class="itemTop">
		          	<div class="itemTop-tit">
		          		<b style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>采购量统计(吨)</b>
		          	</div>
		          	<div class="itemTop-val">
		          		<div class="itemTopText">当日采购量</div>
		                <b class="boldFont">
		                  <i-count-up :startVal="startVal" :endVal="endVal.todayProcurement" :decimals="decimals" :duration="duration" :options="options" />
		                </b>
		                <div class="itemTop-val-row">
		                	<div class="item">
		                		<div class="itemTopText">当月采购量</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.sumProcurement" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                </div>
		          	</div>
	          </div>
          </el-col>
        </div>
        <div class="topLeftCon">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
	          <div class="itemTop">
		          	<div class="itemTop-tit">
		          		<b style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>销量统计(吨)</b>
		          	</div>
		          	<div class="itemTop-val">
		          		<div class="itemTopText">当日销量</div>
		                <b class="boldFont">
		                  <i-count-up :startVal="startVal" :endVal="endVal.todaySalesVolume" :decimals="decimals" :duration="duration" :options="options" />
		                </b>
		                <div class="itemTop-val-row">
		                	<div class="item">
		                		<div class="itemTopText">当月销量</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.sumSalesVolume" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                	<div class="item">
		                		<div class="itemTopText">累积预售量</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.preSellWeight" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                </div>
		          	</div>
	          </div>
          </el-col>
        </div>
        <div class="topLeftCon">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
	          <div class="itemTop">
              <div class="itemTop-tit">
		          		<b style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>吨钢毛利(元)</b>
		          	</div>
		          	<div class="itemTop-val">
		          		<div class="itemTopText">当日吨钢</div>
		                <b class="boldFont">
		                  <i-count-up :startVal="startVal" :endVal="endVal.lockGoodsTotalWeight" :decimals="decimals" :duration="duration" :options="options" />
		                </b>
                    <div class="itemTop-val-row">
		                	<div class="item">
		                		<div class="itemTopText">当月吨钢</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.sumGrossMarginPerTon" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                </div>
		          	</div>
	          </div>
          </el-col>
        </div>
        <div class="topLeftCon">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="minTopLeftCon">
	          <div class="itemTop">
              <div class="itemTop-tit">
		          		<b style="color: #2ff0d2; font-size: 20px;"><i class="changeCen-i"></i>毛利统计(元)</b>
		          	</div>
		          	<div class="itemTop-val">
		          		<div class="itemTopText">当日毛利</div>
		                <b class="boldFont">
		                  <i-count-up :startVal="startVal" :endVal="endVal.todayGrossMargin" :decimals="decimals" :duration="duration" :options="options" />
		                </b>
		                <div class="itemTop-val-row">
		                	<div class="item">
		                		<div class="itemTopText">当月毛利</div>
				                <b class="boldFont">
				                  <i-count-up :startVal="startVal" :endVal="endVal.sumGrossMargin" :decimals="decimals" :duration="duration" :options="options" />
				                </b>
		                	</div>
		                </div>
		          	</div>
	          </div>
          </el-col>
        </div>
      </el-row>
      <el-row>
      	<div class="topRightCon">
        	<el-row type="flex" justify="space-between" style="width:100%">
            <!-- 采购统计 start -->
        		<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
        			<div class="topRightLLine">
        				<div class="topRightLTopTitleLine">
        				</div>
        				<span class="topRightLTopTitle">采购统计</span>
        				<sel-time style="right: 0px;position: absolute;" @onChangeTime="changeGrossProfitTimeScope"></sel-time>
        			</div>
        			<chart :chartStyle="'min-height:330px'" :option="procurementOption" />
              <div class="xiaoCaiData">
                <p><span>{{procurementTwoIndex.name}}累计采购量:</span><span class="boldFont">{{procurementTwoIndex.value}}</span><span><img  :src="upDownImg" /></span></p>
                <p><span>{{procurementTwoIndexLast.name}}累计采购量:</span><span class="boldFont">{{procurementTwoIndexLast.value}}</span></p>
              </div>
        			<div style="display:flex;width: 100%;">
        				<div style="width: 49%;">
        					<div class="topRightLLine">
		        				<div class="topRightLTopTitleLine">
		        				</div>
		        				<span class="topRightLTopTitle">{{procurementTwoIndex.name}}地采采购量排名前5</span>
		        			</div>
		        			<ul class="myUl">
		        				<li v-for="(rowItem,rowId) in procurementLandArr" :key="rowId">
		        					<span>{{rowItem.name}}</span>
		        					<span>{{rowItem.value}}</span>
		        				</li>
		        			</ul>
        				</div>
        				<div style="width: 49%;">
        					<div class="topRightLLine">
		        				<div class="topRightLTopTitleLine">
		        				</div>
		        				<span class="topRightLTopTitle">{{procurementTwoIndex.name}}厂采采购量排名前5</span>
		        			</div>
		        			<ul class="myUl">
		        				<li v-for="(rowItem,rowId) in procurementFactoryArr" :key="rowId">
		        					<span>{{rowItem.name}}</span>
		        					<span>{{rowItem.value}}</span>
		        				</li>
		        			</ul>
        				</div>
        			</div>
              <div class="chartLine chartLine-top3"></div>
        		</el-col>
            <!-- 采购统计 end -->
            <!-- 销量统计 start -->
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
        			<div class="topRightLLine">
        				<div class="topRightLTopTitleLine">
        				</div>
        				<span class="topRightLTopTitle">销量统计</span>
        				<sel-time style="right: 0px;position: absolute;" @onChangeTime="changeSellTimeScope"></sel-time>
        			</div>
        			<chart :chartStyle="'min-height:330px'" :option="sellOption" />
              <div class="xiaoCaiData">
                <p><span>{{sellTwoIndex.name}}累计销量:</span><span class="boldFont">{{sellTwoIndex.value}}</span><span><img  :src="upDownImg" /></span></p>
                <p><span>{{sellTwoIndexLast.name}}累计销量:</span><span class="boldFont">{{sellTwoIndexLast.value}}</span></p>
              </div>
        			<div style="width: 100%;">
        				<div style="display: inline-block;width: 49%;">
        					<div class="topRightLLine">
		        				<div class="topRightLTopTitleLine">
		        				</div>
		        				<span class="topRightLTopTitle">{{sellTwoIndex.name}}销量排名前5</span>
		        			</div>
		        			<ul class="myUl">
		        				<li v-for="(rowItem,rowId) in sellLandArrBefore" :key="rowId">
		        					<span>{{rowItem.name}}</span>
		        					<span>{{rowItem.value}}</span>
		        				</li>
		        			</ul>
        				</div>
        				<div style="display: inline-block;width: 49%;">
        					<div class="topRightLLine">
		        				<div class="topRightLTopTitleLine">
		        				</div>
		        				<span class="topRightLTopTitle">{{sellTwoIndex.name}}销量排名末5</span>
		        			</div>
		        			<ul class="myUl">
		        				<li v-for="(rowItem,rowId) in sellLandArrLast" :key="rowId">
		        					<span>{{rowItem.name}}</span>
		        					<span>{{rowItem.value}}</span>
		        				</li>
		        			</ul>
        				</div>
        			</div>
              <div class="chartLine chartLine-top3"></div>
        		</el-col>
            <!-- 销量统计 end -->
        	</el-row>
        </div>
      </el-row>

    <el-row>
      	<div class="topRightCon">
        	<el-row type="flex" justify="space-between" style="width:100%">
            <!-- 毛利统计 start -->
        		<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
        			<div class="topRightLLine">
        				<div class="topRightLTopTitleLine">
        				</div>
        				<span class="topRightLTopTitle">毛利统计</span>
        				<sel-time style="right: 0px;position: absolute;" @onChangeTime="changeMlTimeScope"></sel-time>
        			</div>
        			<chart :chartStyle="'min-height:330px'" :option="mlOption" />
              <div class="xiaoCaiData">
                <p><span>{{mlTwoIndex.name}}毛利:</span><span class="boldFont">{{mlTwoIndex.value}}</span><span><img  :src="upDownImg" /></span></p>
                <p><span>{{mlTwoIndexLast.name}}毛利:</span><span class="boldFont">{{mlTwoIndexLast.value}}</span></p>
              </div>
        			<div style="width: 100%;">
        				<div style="display: inline-block;width: 49%;">
        					<div class="topRightLLine">
		        				<div class="topRightLTopTitleLine">
		        				</div>
		        				<span class="topRightLTopTitle">{{mlTwoIndex.name}}毛利额前5</span>
		        			</div>
		        			<ul class="myUl">
		        				<li v-for="(rowItem,rowId) in mlLandArrBefore" :key="rowId">
		        					<span>{{rowItem.name}}</span>
		        					<span>{{rowItem.value}}</span>
		        				</li>
		        			</ul>
        				</div>
        				<div style="display: inline-block;width: 49%;">
        					<div class="topRightLLine">
		        				<div class="topRightLTopTitleLine">
		        				</div>
		        				<span class="topRightLTopTitle">{{mlTwoIndex.name}}毛利额末5</span>
		        			</div>
		        			<ul class="myUl">
		        				<li v-for="(rowItem,rowId) in mlLandArrLast" :key="rowId">
		        					<span>{{rowItem.name}}</span>
		        					<span>{{rowItem.value}}</span>
		        				</li>
		        			</ul>
        				</div>
        			</div>
              <div class="chartLine chartLine-top3"></div>
        		</el-col>
            <!-- 毛利统计 end -->
            <!-- 分公司销量统计 start -->
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
        			<div class="topRightLLine">
        				<div class="topRightLTopTitleLine">
        				</div>
        				<span class="topRightLTopTitle">分公司销量统计</span>
        				<sel-time style="right: 0px;position: absolute;" @onChangeTime="changeFilialeTimeScope"></sel-time>
        			</div>
        			<chart :chartStyle="'min-height:375px'" :option="filialeOption" />
        			<div style="width: 100%;">
        				<div style="display: inline-block;width: 49%;">
        					<div class="topRightLLine">
		        				<div class="topRightLTopTitleLine">
		        				</div>
		        				<span class="topRightLTopTitle">{{filialeTwoIndex.name}}销量排名前5</span>
		        			</div>
		        			<ul class="myUl">
		        				<li v-for="(rowItem,rowId) in filialeLandArrBefore" :key="rowId">
		        					<span>{{rowItem.name}}</span>
		        					<span>{{rowItem.value}}</span>
		        				</li>
		        			</ul>
        				</div>
        				<div style="display: inline-block;width: 49%;">
        					<div class="topRightLLine">
		        				<div class="topRightLTopTitleLine">
		        				</div>
		        				<span class="topRightLTopTitle">{{filialeTwoIndex.name}}销量排名末5</span>
		        			</div>
		        			<ul class="myUl">
		        				<li v-for="(rowItem,rowId) in filialeLandArrLast" :key="rowId">
		        					<span>{{rowItem.name}}</span>
		        					<span>{{rowItem.value}}</span>
		        				</li>
		        			</ul>
        				</div>
        			</div>
              <div class="chartLine chartLine-top3"></div>
        		</el-col>
            <!-- 分公司销量统计 end -->
        	</el-row>
        </div>
      </el-row>
      <el-row>
      	<div class="bottomCon marginBot-20">
        	<el-row type="flex" justify="space-between" style="width:100%">
            <!-- 当月锁货量统计 -->
        		<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
        			<div class="topRightLLine flex-sb-ic">
        				<div class="flex-ic">
                  <span class="topRightLTopTitleLine"></span>
                  <span class="topRightLTopTitle">当月锁货量统计</span>
                </div>
                <div class="selCon">
    							<el-select @change="fetchSumProcurement" style="width:95px" v-model="lockDefault">
    								<el-option v-for="item in lockArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
    							</el-select>
    						</div>
        			</div>
        			<chart :chartStyle="'min-height:230px;height:330px'" :option="sumProcurementOption" />
              <div class="sumProcurementText">
                <p class="sumProcurementTextNum">
                  <span>当月累计锁货:</span>
                  <span class="boldFont">{{nowMounthLock}}</span>
                </p>
                <div class="sumProcurementTextPart">
                  <p><span>钢厂锁货:</span><span class="boldFont">{{factoryLock}}</span></p>
                  <p><span>贸易商锁货:</span><span class="boldFont">{{tradersLock}}</span></p>
                </div>
              </div>
              <div class="chartLine"></div>
        		</el-col>
            <!-- 厂家余款统计 -->
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="minTopLeftCon">
        			<div class="topRightLLine flex-sb-ic">
        				<div class="flex-ic">
                  <div class="topRightLTopTitleLine"></div>
                  <span class="topRightLTopTitle">厂家余款统计</span>
        				</div>
        			</div>
                <div class="flex-sb-ic cellCon">
                <ul class="myUl widthCalc"  v-for="(rowItem,rowId) in factoryMoney" :key="rowId">
                  <li>
                    <span>{{rowItem.name}}</span>
                    <span>{{rowItem.value}}</span>
                  </li>
                </ul>
                </div>
              
        		</el-col>
        	</el-row>
        </div>
      </el-row>
    </div>
</template>
<script>
import chart from "../../../../components/Charts/newChart";
import ICountUp from "vue-countup-v2";
import {
  GetDataByTarget,
  GetDetailList,
  GetSteelTradeInfo,
  GetRankingByTarget,
  GetStatisticalContrastDataByTarget,
  GetSupplierLockGoodsInfo
} from "@/api/gq/index";
import echarts from "echarts";
import bgLayOut from "@/components/bgLayOut/index";
import myTable from "@/components/branch/myTable";
import selTime from "@/components/gq/selGqTime";
const lineCircle2 =
  "";
const lineCircle =
  "";

export default {
  name: "sellAnalysis",
  components: {
    chart,
    ICountUp,
    bgLayOut,
    myTable,
    selTime
  },
  computed: {
    upDownImg() {
      return this.procurementUp
        ? "../../../../../static/img/gq/caixiao_up.png"
        : "../../../../../static/img/gq/caixiao_down.png";
    },
    upDownSellImg() {
      return this.sellUp
        ? "../../../../../static/img/gq/caixiao_up.png"
        : "../../../../../static/img/gq/caixiao_down.png";
    }
  },
  data() {
    return {
      isTest: this.$utils.gqIsTestTure, //  是否测试数据 ture  测试数据  false 正式数据
      tradersLock: 0, //  贸易商锁货
      factoryLock: 0, // 钢厂锁货
      nowMounthLock: 0, // 当月累计锁货
      factoryMoney: [],
      factoryMoneySec: [], // 第二列数据
      lockDefault: "26001",
      lockArr: [
        {
          label: "钢厂",
          value: "26001"
        },
        {
          label: "贸易商",
          value: "26002"
        }
      ],
      lockOption: {}, // 锁货量统计
      // 分公司销量统计
      filialeData: {}, // 毛利统计参数
      filialeLandArrLast: [], // 排名末5
      filialeLandArrBefore: [], // 排名前五
      filialeUp: false, // 销量是否增长
      filialeOption: {}, // 销量
      filialeTwoIndex: {
        name: "上周",
        value: 0
      },
      filialeTwoIndexLast: {
        name: "本周",
        value: 0
      },
      // end
      // 毛利统计
      mlData: {}, // 毛利统计参数
      mlLandArrLast: [], // 排名末5
      mlLandArrBefore: [], // 排名前五
      mlUp: false, // 销量是否增长
      mlOption: {}, // 销量
      mlTwoIndex: {
        name: "上周",
        value: 0
      },
      mlTwoIndexLast: {
        name: "本周",
        value: 0
      },
      // 销量统计状态集
      sellLandArrLast: [], // 排名末5
      sellLandArrBefore: [], // 排名前五
      sellUp: false, // 销量是否增长
      sellOption: {}, // 销量
      sellProfitData: {}, // 销量统计参数
      sellTwoIndex: {
        name: "上周",
        value: 0
      },
      sellTwoIndexLast: {
        name: "本周",
        value: 0
      },
      // end
      procurementFactoryArr: [], // 场采排名
      procurementLandArr: [], // 地采排名
      procurementUp: false, // 采购是否增长
      procurementTwoIndexLast: {
        name: "上周",
        value: 0
      }, // 采购上周
      procurementTwoIndex: {
        name: "本周",
        value: 0
      }, // 采购本周
      supplierSalesRankingData: [], // 供应商销量排名
      warehouseSalesRankingData: [], // 仓库销量排名
      supplierMaoriRankingData: [], // 供应商毛利排名
      warehouseMaoriRankingData: [], // 仓库毛利排名
      tendencyData: {}, // 销量参数
      grossProfitData: {}, // 毛利润参数
      endVal: {
        todaySalesVolume: 0, // 今日销量 ,
        todayGrossMargin: 0, // 今日毛利 ,
        sumSalesVolume: 0, // 累计销量 ,
        sumGrossMargin: 0, // 累计毛利 ,
        sumProcurement: 0, // 累计采购量 ,
        preSellWeight: 0, // 累计预售量 ,
        todayProcurement: 0, // 当日采购量 ,
        lockGoodsTotalWeight: 0, // 累计锁货量
        sumGrossMarginPerTon: 0
      },
      volumeArr: [{ label: "钢厂", value: "" }, { label: "贸易商", value: "" }], // 当月锁货量统计
      surplusArr: [
        { label: "钢厂", value: "" },
        { label: "贸易商", value: "" }
      ], // 厂家余款统计
      tableHeads: [
        { key: "departmentName", name: "分公司名称" },
        { key: "customerShortName", name: "客户经理" },
        { key: "employeeName", name: "客户名称" },
        { key: "noPay", name: "应收账款" },
        { key: "zhangPeriod", name: "账龄" }
      ],
      sumProcurementOption: {}, // 当月锁货量TOP10
      warehouseDaySaleOption: {}, // 当月采销量TOP10
      daySaleOption: {}, // 供应商销量占比
      procurementOption: {}, // 采购统计
      tendencyOption: {}, // 趋势
      itemW: 0,
      offsetL: 0,
      nowId: 0,
      workNum: 0,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      topNav: [
        {
          name: "浩得钢圈驾驶舱",
          id: ""
        },
        {
          name: "销售分析",
          id: "9003"
        },

        {
          name: "应收账款",
          id: "9005"
        },
        {
          name: "库存/差价",
          id: "9007"
        }
      ],
      storesIncome: true, // 选中状态
      storeId: "",
      prevText: "上一页",
      nextText: "下一页"
    };
  },
  mounted() {
    this.fetchData(); // 获取数据
    this.storeId = this.$route.query.storeId;
    this.onNav("", 0);
  },
  methods: {
    // 厂家余款
    async fetchFactoryMoney() {
      try {
        var params = {
          queryType: "24030",
          timeType: "3008",
          isTest: this.isTest
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          this.factoryMoney = res.data.result.list;
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 供应商销量排名
    async fetchSupplierSalesRanking() {
      try {
        var params = {
          timeType: this.tendencyData.timeType,
          timeAccuracy: "4001",
          queryType: "24003",
          isTest: this.isTest
        };
        if (this.tendencyData.timeType === 3004) {
          params.startTime = this.tendencyData.time[0];
          params.endTime = this.tendencyData.time[1];
        }
        var res = await GetRankingByTarget(params);
        if (res.data.code === "0") {
          var data = res.data.result.list;
          this.$set(this, "supplierSalesRankingData", data);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 仓库销量排名
    async fetchWarehouseSalesRanking() {
      try {
        var params = {
          timeType: this.tendencyData.timeType,
          timeAccuracy: "4001",
          queryType: "24005",
          isTest: this.isTest
        };
        if (this.tendencyData.timeType === 3004) {
          params.startTime = this.tendencyData.time[0];
          params.endTime = this.tendencyData.time[1];
        }
        var res = await GetRankingByTarget(params);
        if (res.data.code === "0") {
          var data = res.data.result.list;
          this.$set(this, "warehouseSalesRankingData", data);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 供应商毛利排名
    async fetchSupplierMaoriRanking() {
      try {
        var params = {
          timeType: this.tendencyData.timeType,
          timeAccuracy: "4001",
          queryType: "24004",
          isTest: this.isTest
        };
        if (this.tendencyData.timeType === 3004) {
          params.startTime = this.tendencyData.time[0];
          params.endTime = this.tendencyData.time[1];
        }
        var res = await GetRankingByTarget(params);
        if (res.data.code === "0") {
          var data = res.data.result.list;
          this.$set(this, "supplierMaoriRankingData", data);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 仓库毛利排名
    async fetchWarehouseMaoriRanking() {
      try {
        var params = {
          timeType: this.tendencyData.timeType,
          timeAccuracy: "4001",
          queryType: "24006",
          isTest: this.isTest
        };
        if (this.tendencyData.timeType === 3004) {
          params.startTime = this.tendencyData.time[0];
          params.endTime = this.tendencyData.time[1];
        }
        var res = await GetRankingByTarget(params);
        if (res.data.code === "0") {
          var data = res.data.result.list;
          this.$set(this, "warehouseMaoriRankingData", data);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取标题数据
    async fetchTitData() {
      try {
        var params = {
          isTest: this.isTest
        };
        var res = await GetSteelTradeInfo(params);
        if (res.data.code === "0") {
          this.$set(this, "endVal", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 销量改变时间
    changeTendencyTimeScope(res) {
      this.$set(this, "tendencyData", res);
      this.fetchTendency();
      this.fetchSupplierSalesRanking();
      this.fetchWarehouseSalesRanking();
    },
    // 分工公司统计改变时间
    changeFilialeTimeScope(res) {
      this.$set(this, "filialeData", res);
      this.fetchFilialeData();
    },
    // 毛利统计改变时间
    changeMlTimeScope(res) {
      this.$set(this, "mlData", res);
      this.fetchMl();
    },
    // 销量统计改变时间
    changeSellTimeScope(res) {
      this.$set(this, "sellProfitData", res);
      this.fetchSell();
    },
    // 采购统计改变时间
    changeGrossProfitTimeScope(res) {
      this.$set(this, "grossProfitData", res);
      this.fetchProcurement();
    },
    formatterPieTwo(res, params, unit) {
      var minResult = "";
      if (res[0].list) {
        res[params.dataIndex].list.forEach((item, id) => {
          var minItem =
            '<div style="display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px"><span>' +
            item.name +
            '</span><span style="margin-top:2px;font-size:20px;font-family:DIN Condensed Bold">' +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
      }
      var val = params.data.value;
      var imgConStart =
        '<div style="display:flex;padding:15pt 12pt 12pt 12pt;color:' +
        params.color +
        ';flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;">' +
        '<span style="width:100%;font-size:30px;font-family:DIN Condensed Bold">' +
        val +
        "</span>" +
        '<div style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px">';

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // 当月锁货量TOP10
    async fetchSumProcurement() {
      try {
        var params = {
          supplierType: this.lockDefault, // 26001 厂采购 26002 供应商,
          isTest: this.isTest
        };
        var res = await GetSupplierLockGoodsInfo(params);
        if (res.data.code === "0") {
          var data = res.data.result.list;
          var unit = "锁货量";
          var result = res.data.result.statisticalModel;
          this.nowMounthLock = result.sumLockGoods;
          this.factoryLock = result.steelMillLockGoods;
          this.tradersLock = result.tradersLockGoods;
          this.setBarOption(
            data,
            "sumProcurementOption",
            unit,
            "#31cee6",
            "#6937fd"
          );
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 当月采销量TOP10
    async fetchWarehouseDaySale() {
      try {
        var params = {
          queryType: "24011",
          isTest: this.isTest
        };
        var res = await GetRankingByTarget(params);
        if (res.data.code === "0") {
          var data = res.data.result.list;
          var unit = "当月采销量(吨)";
          this.setBarOption(
            data,
            "warehouseDaySaleOption",
            unit,
            "#31cee6",
            "#6937fd"
          );
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 趋势统计
    async fetchTendency() {
      try {
        var params = {
          timeType: this.tendencyData.timeType,
          timeAccuracy: "4001",
          queryType: "24014",
          isTest: this.isTest
        };
        if (this.tendencyData.timeType === 3004) {
          params.startTime = this.tendencyData.time[0];
          params.endTime = this.tendencyData.time[1];
        }
        var res = await GetDetailList(params);
        if (res.data.code === "0") {
          var data = res.data.result.list;
          var color = [];
          this.initLineChart(data, "tendencyOption", color, lineCircle2);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 分公司销量统计
    async fetchFilialeData() {
      try {
        var filialeType = this.filialeData;
        // 本周、本月、按天显示，
        var params = {
          timeType: filialeType.timeType, // 时间类型
          queryType: "24025",
          isTest: this.isTest
        };
        const timeType = filialeType.timeType;
        if (timeType === 3004) {
          params.startTime = filialeType.time[0];
          params.endTime = filialeType.time[1];
          this.filialeTwoIndex.name = "自定义时间段";
          this.filialeTwoIndexLast.name = "自定义时间段同期";
        } else if (timeType === 3007) {
          // 本周数据
          this.filialeTwoIndex.name = "本周";
          this.filialeTwoIndexLast.name = "上周";
        } else if (timeType === 3008) {
          // 本月
          this.filialeTwoIndex.name = "本月";
          this.filialeTwoIndexLast.name = "上月";
        }
        // 上周、本周、上月、本月数据 end
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var unit = "";
          this.setBarOption(
            res.data.result.list,
            "filialeOption",
            unit,
            "#31cee6",
            "#6937fd"
          );
        }
        // 上周、本周、上月、本月数据
        const twoParams = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: filialeType.timeType, // 时间类型
          queryType: "24025",
          isTest: this.isTest
        };
        var twoIndexRes = await GetStatisticalContrastDataByTarget(twoParams);
        if (twoIndexRes.data.code === "0") {
          const result = twoIndexRes.data.result;
          this.$set(this.filialeTwoIndex, "value", result.currentData);
          this.$set(this.filialeTwoIndexLast, "value", result.contrastData);
          if (result.contrastData > 0) {
            // 是否为增长
            this.filialeUp = true;
          } else {
            this.filialeUp = false;
          }
        }
        var paramsSellSort = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: filialeType.timeType, // 时间类型
          queryType: "24025",
          isAsc: false,
          isTest: this.isTest
        };

        var resSellSort = await GetRankingByTarget(paramsSellSort);
        if (resSellSort.data.code === "0") {
          this.filialeLandArrBefore = resSellSort.data.result.list;
        }
        var paramsSellSortTrue = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: filialeType.timeType, // 时间类型
          queryType: "24025",
          isAsc: true,
          isTest: this.isTest
        };
        var resSellSortTrue = await GetRankingByTarget(paramsSellSortTrue);
        if (resSellSortTrue.data.code === "0") {
          this.filialeLandArrLast = resSellSortTrue.data.result.list;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 毛利统计
    async fetchMl() {
      try {
        var mlType = this.mlData;
        // 本周、本月、按天显示，
        var params = {
          timeType: mlType.timeType, // 时间类型
          timeAccuracy: "4001", // 按天、按月数据
          queryType: "24001", // 毛利,
          isTest: this.isTest
        };
        const timeType = mlType.timeType;
        if (timeType === 3004) {
          params.startTime = mlType.time[0];
          params.endTime = mlType.time[1];
          this.mlTwoIndex.name = "自定义时间段";
          this.mlTwoIndexLast.name = "自定义时间段同期";
        } else if (timeType === 3007) {
          // 本周数据
          this.mlTwoIndex.name = "本周";
          this.mlTwoIndexLast.name = "上周";
        } else if (timeType === 3008) {
          // 本月
          this.mlTwoIndex.name = "本月";
          this.mlTwoIndexLast.name = "上月";
        }
        // 上周、本周、上月、本月数据
        const twoParams = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: mlType.timeType, // 时间类型
          queryType: "24001", // 毛利,
          isTest: this.isTest
        };
        var twoIndexRes = await GetStatisticalContrastDataByTarget(twoParams);
        if (twoIndexRes.data.code === "0") {
          const result = twoIndexRes.data.result;
          this.$set(this.mlTwoIndex, "value", result.currentData);
          this.$set(this.mlTwoIndexLast, "value", result.contrastData);
          if (result.contrastData > 0) {
            // 是否为增长
            this.mlUp = true;
          } else {
            this.mlUp = false;
          }
        }
        // 上周、本周、上月、本月数据 end
        var res = await GetDetailList(params); // 厂采
        if (res.data.code === "0") {
          const color = ["#0c43fd"];
          this.initLineChart(
            res.data.result.list,
            "mlOption",
            color,
            lineCircle,
            "毛利"
          );
        }
        // 毛利名
        var paramsSellSort = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: mlType.timeType, // 时间类型
          queryType: "24001",
          isAsc: false,
          isTest: this.isTest
        };

        var resSellSort = await GetRankingByTarget(paramsSellSort);
        if (resSellSort.data.code === "0") {
          this.mlLandArrBefore = resSellSort.data.result.list;
        }
        var paramsSellSortTrue = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: mlType.timeType, // 时间类型
          queryType: "24001",
          isAsc: true,
          isTest: this.isTest
        };
        var resSellSortTrue = await GetRankingByTarget(paramsSellSortTrue);
        if (resSellSortTrue.data.code === "0") {
          this.mlLandArrLast = resSellSortTrue.data.result.list;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 销量统计
    async fetchSell() {
      try {
        var sellProfitTimeType = this.sellProfitData;
        // 本周、本月、按天显示，
        var params = {
          timeType: sellProfitTimeType.timeType, // 时间类型
          timeAccuracy: "4001", // 按天、按月数据
          queryType: "24014", // 销量twoParams,
          isTest: this.isTest
        };
        const timeType = sellProfitTimeType.timeType;
        if (timeType === 3004) {
          params.startTime = sellProfitTimeType.time[0];
          params.endTime = sellProfitTimeType.time[1];
          this.sellTwoIndex.name = "自定义时间段";
          this.sellTwoIndexLast.name = "自定义时间段同期";
        } else if (timeType === 3007) {
          // 本周数据
          this.sellTwoIndex.name = "本周";
          this.sellTwoIndexLast.name = "上周";
        } else if (timeType === 3008) {
          // 本月
          this.sellTwoIndex.name = "本月";
          this.sellTwoIndexLast.name = "上月";
        }
        // 上周、本周、上月、本月数据
        const twoParams = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: sellProfitTimeType.timeType, // 时间类型
          queryType: "24014", // 销量量,
          isTest: this.isTest
        };
        var twoIndexRes = await GetStatisticalContrastDataByTarget(twoParams);
        if (twoIndexRes.data.code === "0") {
          const result = twoIndexRes.data.result;
          this.$set(this.sellTwoIndex, "value", result.currentData);
          this.$set(this.sellTwoIndexLast, "value", result.contrastData);
          if (result.contrastData > 0) {
            // 是否为增长
            this.sellUp = true;
          } else {
            this.sellUp = false;
          }
        }
        // 上周、本周、上月、本月数据 end
        var res = await GetDetailList(params); // 厂采
        if (res.data.code === "0") {
          const color = ["#0c43fd"];
          this.initLineChart(
            res.data.result.list,
            "sellOption",
            color,
            lineCircle,
            "销量"
          );
        }
        // 销量名
        var paramsSellSort = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: sellProfitTimeType.timeType, // 时间类型
          queryType: "24014",
          isAsc: false,
          isTest: this.isTest
        };

        var resSellSort = await GetRankingByTarget(paramsSellSort);
        if (resSellSort.data.code === "0") {
          this.sellLandArrBefore = resSellSort.data.result.list;
        }
        var paramsSellSortTrue = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: sellProfitTimeType.timeType, // 时间类型
          queryType: "24014",
          isAsc: true,
          isTest: this.isTest
        };
        var resSellSortTrue = await GetRankingByTarget(paramsSellSortTrue);
        if (resSellSortTrue.data.code === "0") {
          this.sellLandArrLast = resSellSortTrue.data.result.list;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 采购统计
    async fetchProcurement() {
      try {
        // 本周、本月、按天显示，
        var params = {
          timeType: this.grossProfitData.timeType, // 时间类型
          timeAccuracy: "4001", // 按天、按月数据
          queryType: "24029", // 采购量
          supplierType: "26001", // 厂采,
          isTest: this.isTest
        };
        const timeType = this.grossProfitData.timeType;
        if (timeType === 3004) {
          params.startTime = this.grossProfitData.time[0];
          params.endTime = this.grossProfitData.time[1];
          this.procurementTwoIndex.name = "自定义时间段";
          this.procurementTwoIndexLast.name = "自定义时间段同期";
        } else if (timeType === 3007) {
          // 本周数据
          this.procurementTwoIndex.name = "本周";
          this.procurementTwoIndexLast.name = "上周";
        } else if (timeType === 3008) {
          // 本月
          this.procurementTwoIndex.name = "本月";
          this.procurementTwoIndexLast.name = "上月";
        }
        // 上周、本周、上月、本月数据
        const twoParams = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: this.grossProfitData.timeType, // 时间类型
          queryType: "24029", // 采购量,
          isTest: this.isTest
        };
        var twoIndexRes = await GetStatisticalContrastDataByTarget(twoParams);
        if (twoIndexRes.data.code === "0") {
          const result = twoIndexRes.data.result;
          this.$set(this.procurementTwoIndex, "value", result.currentData);
          this.$set(this.procurementTwoIndexLast, "value", result.contrastData);
          if (result.contrastData > 0) {
            // 是否为增长
            this.procurementUp = true;
          } else {
            this.procurementUp = false;
          }
        }
        // 上周、本周、上月、本月数据 end
        var res = await GetDetailList(params); // 厂采
        var paramsLand = {
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: this.grossProfitData.timeType, // 时间类型
          timeAccuracy: "4001", // 按天、按月数据
          queryType: "24029", // 采购量
          supplierType: "26002", // 地采,
          isTest: this.isTest
        };
        var resLand = await GetDetailList(paramsLand); // 地采
        if (res.data.code === "0") {
          var moreLineArrData = [
            {
              name: "厂采",
              list: res.data.result.list
            },
            {
              name: "地采",
              list: resLand.data.result.list
            }
          ];
          this.initMoreChart(moreLineArrData, "procurementOption");
        }
        // 地采、厂采排名
        var paramsLandSort = {
          // 地采
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: this.grossProfitData.timeType, // 时间类型
          queryType: "24029",
          supplierType: "26002",
          isAsc: false,
          isTest: this.isTest
        };
        const paramsFactorySort = {
          // 厂采
          startTime: params.startTime,
          endTime: params.endTime,
          timeType: this.grossProfitData.timeType, // 时间类型
          queryType: "24029",
          supplierType: "26001",
          isAsc: false,
          isTest: this.isTest
        };
        var resLandSort = await GetRankingByTarget(paramsLandSort);
        if (resLandSort.data.code === "0") {
          this.procurementLandArr = resLandSort.data.result.list;
        }
        var resFactorySort = await GetRankingByTarget(paramsFactorySort);
        if (resFactorySort.data.code === "0") {
          this.procurementFactoryArr = resFactorySort.data.result.list;
        }
      } catch (e) {
        console.log(e);
      }
    },
    //  供应商销量占比
    async fetchDaySale() {
      try {
        var params = {
          queryType: "24012",
          isTest: this.isTest
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var unit = "吨";
          var data = res.data.result.list;
          // var colorArr = ["yellow", "cyan", "red", "green"];
          this.setPieOption("daySaleOption", data, unit, "10%");
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 新建  pie Option
    // optionName：option ，res：数据 ， right：距离  ，colorArr ：颜色数组
    setPieOption(optionName, res, unit, right, colorArr) {
      var seriesObj = {
        type: "pie",
        radius: ["50%", "60%"],
        label: {
          formatter: "{b} \n {d}%",
          fontSize: 20,
          position: "inside",
          color: "#fff",
          fontFamily: "DIN Condensed Bold"
        },
        data: []
      };
      var xData = [];
      res.forEach(item => {
        var xObj = {
          name: "",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        };
        xObj.name = item.xData ? item.xData : item.name;
        xData.push(xObj);
        var obj = {};
        obj.name = item.xData ? item.xData : item.name;
        obj.value = item.value;
        var secObj = {
          value: 10,
          name: "",
          label: {
            show: false
          },
          tooltip: { show: false },
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: "transparent",
              borderColor: "transparent",
              borderWidth: 0
            }
          }
        };

        seriesObj.data.push(obj, secObj);
      });
      var option = {
        color: colorArr || [],
        tooltip: {
          trigger: "item",
          formatter: params => this.formatterPieTwo(res, params, unit)
        },
        legend: {
          data: xData,
          right: right || "0%"
        },
        series: [seriesObj]
      };
      this[optionName] = option;
    },
    // 多个折线图
    initMoreChart(res, optionName) {
      var xData = [];
      var allData = [];
      var legend = [];
      var unit = "";
      var dataLength = res.length; // 几组数据
      // 初始化数据
      for (let i = 0; i < dataLength; i++) {
        var obj = {
          data: [],
          name: "",
          type: "line",
          smooth: true,
          areaStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(141,76,253,0.5)" //  0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(141,76,253,0)" //  100% 处的颜色
                  }
                ],
                globalCoord: false //  缺省为 false
              },
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10
            }
          },
          symbol: "image:// " + lineCircle,
          barWidth: 20
        };
        allData.push(obj);
      }
      res.forEach((item, id) => {
        var legendObj = {
          name: "",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [15, 40, 15, 5]
          }
        };
        legendObj.name = item.name;
        legend.push(legendObj);
        allData[id].name = item.name;
        item.list.forEach((listItem, listId) => {
          if (id === 0) {
            xData.push(listItem.xData);
          }
          allData[id].data.push(listItem.value);
        });
      });
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.formatterLine(res, params, unit)
        },
        legend: {
          data: legend,
          top: "0",
          right: "3.3%",
          orient: "horizontal"
        },
        grid: {
          right: "5%",
          bottom: "20%"
        },
        series: allData
      };
      this.$set(this, optionName, option);
    },
    // 折线图
    initLineChart(res, optionName, lineColor, lineCircle, dataName) {
      var xData = [];
      var allData = [];
      var unit = "";
      var data1 = {
        data: [],
        name: dataName,
        type: "line",
        smooth: true,
        areaStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(141,76,253,0.5)" //  0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(141,76,253,0)" //  100% 处的颜色
                }
              ],
              globalCoord: false //  缺省为 false
            },
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10
          }
        },
        symbol: "image:// " + lineCircle,
        barWidth: 20
      };
      res.forEach(cc => {
        xData.push(cc.xData);
        data1.data.push(cc.value);
      });
      allData.push(data1);
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        color: lineColor,
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.formatterLine(res, params, unit)
        },
        legend: {
          show: false
        },
        grid: {
          right: "5%",
          bottom: "20%"
        },
        series: allData
      };
      this.$set(this, optionName, option);
    },
    formatterLine(res, params, unit) {
      var minResult = "";
      params.forEach(item => {
        var minItem =
          '<div style="display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px"><span>' +
          item.seriesName +
          '</span><span style="margin-top:2px;font-family:DIN Condensed Bold;font-size:20px">' +
          item.value +
          "</span></div>";
        minResult += minItem;
      });
      var imgConStart =
        '<div style="display:flex;padding:12pt 12pt 12pt 12pt;color:#31cee6;flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px">' +
        '<div style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt">';

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // unit:单位  startColor:开始的颜色  endColor:结束的颜色
    setBarOption(res, optionName, unit, startColor, endColor) {
      var xData = [];
      var symbolClip = true;
      var max = 0;
      var data1 = {
        type: "bar",
        name: "",
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: startColor,
              fontWeight: "bold",
              fontFamily: "DIN Condensed Bold",
              fontSize: "22"
            }
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [30, 30, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: startColor
              },
              {
                offset: 1,
                color: endColor
              }
            ])
          }
        },
        z: 10,
        symbolBoundingData: max,
        data: [],
        barWidth: 21
      };
      res.forEach(item => {
        var name = item.name ? item.name : item.xData;
        xData.push(name);
        var obj = {};
        max = Number(item.value) > max ? Number(item.value) : max;
        obj.value = item.value;
        obj.symbolClip = symbolClip;
        data1.data.push(obj);
      });
      data1.symbolBoundingData = max;
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          name: unit,
          nameGap: 30,
          nameTextStyle: {
            color: "#31cee6"
          }
        },
        legend: {
          show: false
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.formatterModal(res, params, unit)
        },
        grid: {
          bottom: "20%",
          left: "15%"
        },
        series: [data1]
      };
      this.$set(this, optionName, option);
    },
    onNav(itemId, id) {
      this.nowId = id;
      this.groupPlate = itemId;
      var itemW = this.$refs["item" + id][0].offsetWidth - 10;
      var itemL = this.$refs["item" + id][0].offsetLeft + 5; // 当前元素距离父节点的左边 水平距离 ,距离父节点的偏移量
      this.$set(this, "offsetL", itemL);
      this.$set(this, "itemW", itemW);
      this.fetchData(); // 获取数据
    },
    formatterModal(res, params, unit, color) {
      var minResult = "";
      if (res[0].list) {
        res[params[0].dataIndex].list.forEach(item => {
          var minItem =
            '<div style="display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px"><span>' +
            item.name +
            '</span><span style="margin-top:2px;font-size:20px;font-family:DIN Condensed Bold">' +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
      }
      var index = params[0].dataIndex;
      var val = res[index].value;
      var nowColor = color || "#31cee6";
      var imgConStart =
        '<div style="display:flex;padding:12pt 10px;color:' +
        nowColor +
        ';flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;">' +
        '<span style="width:100%;font-size:30px;padding:8pt 0 0 0 ;font-family:DIN Condensed Bold">' +
        val +
        "</span>" +
        '<div style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px">';

      var result =
        minResult === ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // 获取数据
    fetchData() {
      // 厂家余款统计
      this.fetchFactoryMoney();
      // 分公司销量统计
      this.fetchFilialeData();
      // 销量统计
      this.fetchSell();
      // 供应商销量占比
      this.fetchDaySale();
      // 当月采销量TOP10
      this.fetchWarehouseDaySale();
      // 当月锁货量TOP10
      this.fetchSumProcurement();

      // 趋势统计
      //     this.fetchTendency();
      // 采购统计
      this.fetchProcurement();
      // 获取标题数据
      this.fetchTitData();
    },
    // 跳页面
    pushPage(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>
<style>
.cellCon ::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.3);
}

.cellCon ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
}

.cellCon ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #555;
}
</style>
<style scoped>
@import "../main.css";
.cellCon {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 430px;
  width: calc(100%);
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.inner-container::-webkit-scrollbar {
    display: none;
}
.topLeftCon {
  display: flex;
  margin-left: 2px;
  margin-right: 20px;
  justify-content: center;
  margin-top: 20px;
  background-image: url("../../../../../static/img/gq/xiaoshou.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: calc(100% / 4);
  padding: 30px;
  height: 370px;
  color: #2ff0d2;
}
.topLeftCon:nth-last-of-type(1) { margin-right: 0; }
.itemTop-tit {
  width: 100%;
  text-align: left;
}
.itemTop-val {
  width: 100%;
  margin-top: 40px;
}
.itemTop-val-row {
  margin-top: 15px;
  width: 100%;
}
.itemTop-val-row .item {
  display: inline-block;
  width: 49%;
}
.itemTop-val-row .item .itemTopText {
  font-size: 16px;
  margin-left: 10px;
}
.itemTop-val-row .item .boldFont span {
  font-size: 30px;
  margin-left: 10px;
}
.itemTopText {
  font-size: 20px;
  /*margin-left: 10px;*/
}
.bottomSelBtn {
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.bottomSelBtn .storeUnActive .el-button {
  background: transparent;
  border: 0;
  color: #1776fd;
}
.bottomSelBtn .storeActive .el-button {
  background: #1776fd;
  border: 1px solid #1776fd;
  color: black;
}

.topLeftItem .itemTop {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  color: #2ff0d2;
}
.topLeftItem .itemTopIcon {
  width: 20px;
  height: 21px;
}
.topLeftItem {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 38px;
  margin-left: 106px;
}
.topLeftItem:first-child {
  margin-left: 0px;
}

.topLeftItem:nth-child(4) {
  margin-left: 0px;
}

.lineImg {
  width: 1712px;
  height: 8px;
  background-image: url("../../../../../static/img/bigData4/minLine.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #2ff0d2;
}

/*.lineCon {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}*/
.chartLine {
  width: 1px;
  height: 340px;
  background: rgba(49, 206, 230, 0.2);
  position: absolute;
  right: 0;
  top: 10%;
}
.chartLine-top {
  width: 1px;
  height: 636px;
  background: rgba(49, 206, 230, 0.2);
  position: absolute;
  right: 0;
  top: 10%;
}
.chartLine-top3 {
  top: 3%;
  height: 760px;
}
.minTopLeftCon {
  position: relative;
  margin-top: 10px;
}
.topRightLLine {
  display: flex;
  align-items: center;
  margin-left: 36pt;
  margin-top: 12pt;
  margin-bottom: 12pt;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}
.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  margin-top: 6px;
  background: #2ff0d2;
}
/*.topRightCon span {
  font-size: 50px;
  line-height: 60px;
  margin-top: 2px;
}*/
.topLeftCon span {
  font-size: 50px;
  line-height: 60px;
  margin-top: 2px;
}
.topLeftCon .itemTop-val-row span {
  line-height: 30px;
}
.topRightCon {
  display: flex;
  flex-direction: row;
  /*align-items: center;*/
  justify-content: space-around;
  margin-top: 20px;
  background-image: url("../../../../../static/img/bigData4/board_xl.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 825px; /* 背景图高度 */
  color: #2ff0d2;
}
.bottomCon {
  display: flex;
  flex-direction: row;
  /*align-items: center;*/
  justify-content: space-around;
  margin-top: 20px;
  background-image: url("../../../../../static/img/bigData4/board_m.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 555px;
  color: #2ff0d2;
}
.bottomCon > .el-row--flex.is-justify-space-between {
  padding: 30px 0;
}
.topBottomLines {
  bottom: -6pt;
  transition: left 0.5s;
  left: 0;
  height: 3px;
  background: #31cee6;
  position: absolute;
}

.active {
  font-weight: bold;
}
.topNavaArrItem {
  display: flex;
  color: rgba(49, 206, 230, 0.8);
  font-size: 18px;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  height: 16px;
  border-left: 1px solid rgba(49, 206, 230, 0.2);
}
.topNavaArrItem:nth-child(1) {
  border-left: 0;
}
.topNavs {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12pt;
}
.topNavArr {
  width: 100%;
  display: flex;
  height: 79px;
  align-items: flex-end;
  justify-content: center;
}
.itemTop {
  text-align: center;
  color: #2ff0d2;
}
.myUl {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}
.myUl li {
  display: flex;
  margin-bottom: 34px;
  color: #2ff0d2;
  font-size: 16px;
}
.myUl li span {
  margin: auto 55px;
}
.myUl li span:first-child {
  width: 70%;
  text-align: left;
}
.myUl li span:last-child {
  width: 30%;
  text-align: right;
}
.changeCen-i {
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-top: 6px;
  margin-right: 6px;
  background-color: #2ff0d2;
}

/* 销采 */
.xiaoCaiData {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 160px);
  margin: auto;
}
.xiaoCaiData p span {
  display: inline-block;
}
.xiaoCaiData p span:nth-of-type(1) {
  font-size: 14px;
}
.xiaoCaiData p span:nth-of-type(2) {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 30px;
}
.xiaoCaiData p span:nth-of-type(3) {
  width: 19px;
  height: 19px;
}

/* 当月锁货量统计说明 */
.sumProcurementText {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 160px);
  margin: auto;
}
.sumProcurementTextPart p {
  display: inline-block;
}
.sumProcurementTextNum span:nth-of-type(1),
.sumProcurementTextPart p:nth-of-type(1) span:nth-of-type(1),
.sumProcurementTextPart p:nth-of-type(2) span:nth-of-type(1) {
  font-size: 14px;
}
.sumProcurementTextNum span:nth-of-type(2),
.sumProcurementTextPart p:nth-of-type(1) span:nth-of-type(2),
.sumProcurementTextPart p:nth-of-type(2) span:nth-of-type(2) {
  margin-left: 10px;
  font-size: 30px;
}
.sumProcurementTextPart p:nth-of-type(1) {
  margin-right: 30px;
}
/* 当月锁货量统计选项 */
.selCon {
  margin-right: 55px;
}

/* 自定义flex */
.flex-ic {
  display: flex;
  align-items: center;
}
.flex-sb-ic {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widthCalc {
  width: calc(100% / 2);
}
.pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -50px;
}
.el-pagination .btn-next,
.el-pagination .btn-prev {
  background: transparent;
}
</style>
